<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/static/jquery-1.11.3.min.js"></script>
    <script src="/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script>
        $(function () {
            var num = 0;
            var interval = setInterval(function () {
              num += 5;
                $('#progress').text(num+"%");
                $('#progress').css('width',num+"%");
                if(num>=100){
                    clearInterval(interval);
                }

            },500);

        })
    </script>

</head>
<body>
<div class="container">
    <div class="progress">
        <div id="progress" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="sr-only">0%</span>
        </div>
    </div>
</div>
</body>
</html>